let oInit = document.querySelector(".init");
let oStart = document.querySelector(".start");
console.log(oInit)
let oCanvas = document.getElementById("img");
let oCtx = oCanvas.getContext("2d");
let oImg = new Image();
let imgSrc = "../面试题/reviews/img/img_loading.png";
oImg.src = imgSrc;
if (oCtx) {
    oImg.onload = function() {
        oCanvas.width = this.width;
        oCanvas.height = this.height;
        oCtx.drawImage(this, 0, 0);
    }
    oImg.onerror = function(err) {
        console.log(err);
    }
}
let currentDeg = 0; // 度从0开始
// 先绘制背景，这里只绘制一次，跟水平进度条不一样呢
drawCircle();
drawArc(currentDeg++);

function drawArc(deg) {
    // 计算deg次时的开始角度
    let from = (Math.PI / 180) * deg;
    // 计算deg次时的结束角度
    let to = (Math.PI / 180) * deg + Math.PI / 180;
    oCtx.beginPath();
    oCtx.lineWidth = 3;
    // 设置线头的样式为圆头，默认是方形(不圆润)
    oCtx.lineCap = 'round';
    oCtx.strokeStyle = 'gray';
    oCtx.arc(95, 80, 68, from, to, false);
    // 清空画布上的文字，这里不是清除整个画布哦
    oCtx.clearRect(80, 180, 20, 0);
    oCtx.font = '16px serif';
    let text = (currentDeg / 360 * 100).toFixed(0) + "%";
    // oCtx.fillText(text, 80, 180);
    oCtx.stroke();
    oCtx.closePath()
    if (currentDeg <= 360) {
        setTimeout(function() {
            drawArc(currentDeg++);
        }, 10)
    } else {
        oInit.style.display = "none";
        // $(oInit).fadeOut();
        oStart.style.display = "flex";
    }
}

function drawCircle() {
    oCtx.beginPath();
    oCtx.lineWidth = 6;
    oCtx.strokeStyle = '#ccc';
    oCtx.arc(200, 200, 80, 0, Math.PI * 2, false);
    oCtx.stroke();
    oCtx.closePath()
}

console.log(oCanvas);